<template>
  <div class="create-order">
    <nav-bar class="nav-bar">
      <template v-slot:default>
        订单预览
      </template>
    </nav-bar>

    <div class="address-wrap">
      <div class="name" @click="goTo">
        <span>{{ address.name }}</span>
        <span>{{ address.phone }}</span>
      </div>
      <div class="address">
        {{ address.province }} {{ address.city }} {{ address.county }} {{ address.address }}
      </div>
      <van-icon class="arrow" name="arrow"/>
    </div>
    <div class="good">
      <div v-for="(item, index) in cartList" :key="index" class="good-item">
        <div class="good-img"><img v-lazy="item.goods.cover_url" alt=""></div>
        <div class="good-desc">
          <div class="good-title">
            <span>{{ item.goods.title }}</span>
            <span>x{{ item.num }}</span>
          </div>
          <div class="good-btn">
            <div class="price"><small>¥</small> {{ item.goods.price.toFixed(2) }}</div>
          </div>
        </div>
      </div>
    </div>

    <van-submit-bar
        :price="total * 100"
        button-text="结算"
        class="submit-all"
        @submit="handleCreateOrder"
    >
      商品金额
    </van-submit-bar>

    <van-popup
        v-model:show="showPay"
        :close-on-click-overlay="false"
        :style="{ height: '40%',paddingTop:'20px' }"
        closeable
        position="bottom"
        @close="close"
    >

      <van-grid :border="false" :column-num="2">
        <van-grid-item @click="thePaySuccess">
          支付宝二维码<br><br>
          <van-image :src="aliyun" height="150" width="150"/>
        </van-grid-item>
        <van-grid-item>
          微信二维码<br><br>
          <van-image :src="wechat" height="150" width="150"/>
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, toRefs} from "vue";
import {showLoadingToast, showSuccessToast} from "vant";
import {createOrder, getOrderPreview, paySuccess} from "@/network/order";
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

// const route = useRoute()
const router = useRouter()
const store = useStore()
const state = reactive({
  cartList: [],
  address: {},
  showPay: false,
  orderNo: '',
})
const {address, cartList, showPay} = toRefs(state)
const init = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  getOrderPreview().then(res => {
    // 获取默认地址
    const address = res.address.filter(item => item.is_default === 1);
    if (address.length === 0) {
      state.address = {address: '未设置地址'}
    } else {
      state.address = address[0]
    }
    const {carts} = res
    state.cartList = [...carts];
  })
}
const close = () => {
  router.push({path: '/orderdetail', query: {id: state.orderNo}})
}
// 修改地址
const goTo = () => {
  router.push({path: '/address'})
}
// 模拟支付成功
const thePaySuccess = () => {
  // 判断是否有商品
  if (state.orderNo) {
    paySuccess(state.orderNo, {type: 'aliyun'}).then(() => {
      showSuccessToast('支付成功')
      // 模拟支付成功，跳转到订单详情页面
      router.push({path: '/orderdetail', query: {id: state.orderNo}})
    })
  }
}
// 计算总价
const total = computed(() => {
  let sum = 0;
  state.cartList.forEach(({goods, num}) => {
    sum += parseInt(num) * parseFloat(goods.price);
  })
  return sum
})
// 生成订单
const handleCreateOrder = () => {
  const params = {
    address_id: state.address.id
  }
  createOrder(params).then(res => {
    const {order_no, id} = res
    state.orderNo = id
    if (order_no) {
      // 刷新购物车状态
      store.dispatch('updateCart');
      // 显示支付方式
      state.showPay = true
    }
  })
}
// 关闭支付页面
// const close = () => {
// 	// 跳转到详情页
// 	router.push({path: '/orderdetail', query: {id: state.orderNo}})
// }
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.create-order {
  background: #f9f9f9;

  .address-wrap {
    text-align: left;
    //margin-bottom: 20px;
    background: #fff;
    position: relative;
    margin-top: 44px;
    font-size: 14px;
    padding: 15px;
    color: #222333;

    .name, .address {
      margin: 10px 0;
    }

    .arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }

  .good {
    margin-bottom: 120px;
  }

  .good-item {
    padding: 10px;
    background: #fff;
    display: flex;

    .good-img {
      img {
        width: 100px;
        height: auto;
      }
    }

    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding: 20px;

      .good-title {
        display: flex;
        justify-content: space-between;
      }

      .good-btn {
        display: flex;
        justify-content: space-between;

        .price {
          font-size: 16px;
          color: red;
          line-height: 28px;
        }

        .van-icon-delete {
          font-size: 20px;
          margin-top: 4px;
        }
      }
    }
  }

  .pay-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px 0 50px;
    border-top: 1px solid #e9e9e9;

    > div {
      display: flex;
      justify-content: space-between;
      padding: 0 5%;
      margin: 10px 0;
      font-size: 14px;

      span:nth-child(2) {
        color: red;
        font-size: 18px;
      }
    }

    .pay-btn {
      position: fixed;
      bottom: 7px;
      right: 0;
      left: 0;
      width: 90%;
      margin: 0 auto;
    }
  }
}

.submit-all {
  margin-bottom: 50px;
  z-index: 9 !important;
}
</style>
